<template>
  <div class="test">
    <div class="testNav">
      <div :class="{'selected':tab === 1,'testTitle':true}" @click="changTab(1)">{{list[0]}}</div>
      <div :class="{'selected':tab === 2,'testTitle':true}" @click="changTab(2)">{{list[1]}}</div>
      <div :class="{'selected':tab === 3,'testTitle':true}" @click="changTab(3)">{{list[2]}}</div>
    </div>
    <div class="container">
      <div v-if="tab===1"><slot name="one"></slot></div>
      <div v-else-if="tab===2"><slot name="two"></slot></div>
      <div v-else-if="tab===3"><slot name="three"></slot></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "tabBar",
    props: {
      list: []
    },
    data() {
      return {
        tab: 1
      };
    },
    methods: {
      changTab(index) {
        this.tab = index;
      }
    }
  }
</script>

<style scoped>
  .test {
    width: 100%;
  }
  .testNav {
    padding: 0 20rpx;
    height: 80rpx;
    line-height: 80rpx;
    display: flex;
  }
  .testTitle {
    flex: 1;
    text-align: center;
    color: #515151;
  }
  .selected {
    color: #FFA500;
    border-bottom: 1px solid #FFA500;
  }
</style>
